<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="append">
			<ul>
				<li>html</li>
				<li>css</li>
				<li>js</li>
			</ul>
			<input type="text" name="" id="" value="" placeholder="请添加您想添加的内容"/>
			<button  type="button">在内部后面添加</button>
		</div>
		<div class="prepend">
			<ul>
				<li>新闻3</li>
				<li>新闻2</li>
				<li>新闻1</li>
			</ul>
			<input type="text" name="" id="" value="" placeholder="请添加您想添加的内容"/>
			<button  type="button">在内部前面添加</button>
		</div>
		<div class="before">
			<p>我的头顶</p>
			<input type="text" name="" id="" value="" placeholder="请添加您想添加的内容"/>
			<button  type="button">在外部前面添加</button>
		</div>
		<div class="after">
			<p>我的脚下</p>
			<input type="text" name="" id="" value="" placeholder="请添加您想添加的内容"/>
			<button  type="button" class="add">在外部后面添加</button>
			<button type="button" class="removeAll">全部删除按钮</button>
			<button type="button" class="removeFirst">删除第一个按钮</button>
		</div>
		<div class="exchange">
			<p>互换元素</p>
			<ul>
				<li>1</li>
				<li>2</li>
				<li style="background-color: pink;">3</li>
				<li class="temp">4</li>
				<li style="background-color: orangered;">5</li>
			</ul>
			<button>互换</button>
		</div>
		<div class="detach">
			<p>半删除元素</p>
			<ul>
				<li class="detachLi">jquery</li>
				<li>Vue</li>
			</ul>
			<button>删除</button>
		</div>
		<div class="empty">	
			<p>清空元素</p>
			<ul>
				<li class="emptyLi">jquery</li>
			</ul>
			<button>清空</button>
		</div>
		<div class="clone">
			<p>克隆元素</p>
			<ul>
				<li class="cloneP">jquery</li>
			</ul>
			<button>克隆</button>
		</div>
		<div class="repalceWith">
			<p>替换元素</p>
			<ul>
				<li class="repalceLi">jquery</li>
			</ul>
			<button>替换</button>
		</div>
		<div class="wrap">
			<p>单独包裹元素</p>
			<ul>
				<li>delphi</li>
				<li>intra web</li>
				<li>canvas</li>
			</ul>
			<button>单独包裹</button>
		</div>
		<div class="wrapAll">
			<p>全部包裹元素</p>
			<ul>
				<li>delphi</li>
				<li>intra web</li>
				<li>canvas</li>
			</ul>
			<button>全部包裹</button>
		</div>
		<div class="wrapInner">
			<p>包裹内部元素</p>
			<ul>
				<li>delphi</li>
				<li>intra web</li>
				<li>canvas</li>
			</ul>
			<button>内部包裹</button>
		</div>
		<div class="each">
			<p>遍历元素</p>
			<ul class="eachLi1">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul class="eachLi2">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<button type="button">添加内容</button>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$("p,ul").css("border","1px solid #000")
			$(".append button").click(function(){
				var $li = "<li>"+$(".append input").val()+"</li>"
				$(".append ul").append($li);
			})
			$(".prepend button").click(function(){
				var $li = "<li>"+$(".prepend input").val()+"</li>"
				$(".prepend ul").prepend($li);
			})
			$(".before button").click(function(){
				var $p = "<p>"+$(".before input").val()+"</p>"
				$(".before p:first-child").before($p);
			})
			// 注意如果这里不加p:first-child,只有p那每一个都会有加上p，是成倍增加p标签
			$(".after button.add").click(function(){
				var $p = "<p>"+$(".after input").val()+"</p>"
				$(".after p").after($p);
			})
			// 注意这里是选不中button的，因为button不是after中第二个元素，要注意nth-child的含义
			// // $(".after button:nth-child(2)").click(function(){
			// // 	$(".after p:last-child").remove();
			// // })
			$(".after button.removeAll").click(function(){
				$(".after>p").remove();
			})
			// 这里会出现一个bug，当所有删除就无法添加了，在append下没有这种情况。
			$(".after button.removeFirst").click(function(){
				$(".after p:first-child").remove();
			})
			
			$(".exchange button").click(function(){
				var $li1 = $(".exchange ul li:nth-child(3)").remove();
				var $li2 = $(".exchange ul li:nth-child(4)").remove();//注意这里不是第5个而是第4个
				var temp = $(".exchange ul li.temp")
				temp.after($li1)
				temp.before($li2)
				
			})
			$(".detachLi").click(function(){
					alert("欢迎光临！")
				})
			$(".detach button").click(function(){
				var $li = $(".detachLi").detach();
				// console.log($li);//返回的是一个jq对象不是字符串
				$(".detach ul li:last-child").append($li);
			})
			$(".empty button").click(function(){
				$(".emptyLi").empty();
			})
			$(".cloneP").click(function(){
				alert("你好！")
			})
			$(".clone button").click(function(){
				var $li = $(".cloneP").clone(true);	//true表示克隆对应的绑定事件
				$(".clone ul").append($li);	//如果点击多次就会多赋值因为克隆的时候把名字也复制了
			})
			$(".repalceWith button").click(function(){
				$(".repalceLi").replaceWith("<a>123</a>");
			})
			$(".wrap button").click(function(){
				$(".wrap li").wrap('<div style="background-color:orange;"></div>');
			})
			$(".wrapAll button").click(function(){
				$(".wrapAll li").wrapAll('<div style="background-color:pink;"></div>');
			})
			$(".wrapInner button").click(function(){
				$(".wrapInner li").wrapInner('<strong></strong>');
			})
			$(".each button").click(function(){
				$(".each .eachLi1 li").each(function(index,element){
					var txt = "第" + (index + 1)+"个li元素";
					$(element).text(txt);
				})
			})
			var texts = ["html","css","js","jq","layui"];
			var colors = ["red","orange","yellow","pink","blue"];
			$(".each button").click(function(){
				$(".each .eachLi2 li").each(function(index){
					$(this).text(texts[index]);
					$(this).css("background-color",colors[index]);
				})
			})
		})
	</script>
</html>
